<template>
	<span class="avatar" :data-sm="sm" :data-lg="lg">
		<img v-if="src" :src="src" :alt="name" />
		<template v-else>{{name[0]}}</template>
	</span>
</template>

<script>
	export default{
		props: {
			'src':{type:String},
			'name':{type:String},
			'sm':{type:Boolean},
			'lg':{type:Boolean}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar{
		display: inline-flex;
		align-items:center;
		justify-content: center;
		width: 2.6em;
		height: 2.6em;
		border-radius: 50%;
		overflow: hidden;
		background: #eee;
		color: #bbb;
		flex: 0 0 auto;
		&[data-sm=true]{
			width: 2em;
			height: 2em;
		}
		&[data-lg=true]{
			width: 3em;
			height: 3em;
		}
	}
	.avatar img{
		width: 100%;
	}
</style>
